<template>
  <el-card class="container mt-2">
    <h3>
      <el-tag type="primary">问题</el-tag>
      {{ info?.que?.title }}
    </h3>
    <el-row>
      <el-col :span="2" :offset="22">
        <el-button :icon="Back" round type="primary" plain @click="$router.back()">返回</el-button>
      </el-col>
    </el-row>
    <el-divider content-position="left">
      <el-text type="info">
        答案发布时间: {{ new Date(info?.create_time).toLocaleString() }}&nbsp;&nbsp;
        作者: {{ info?.user?.username }}
      </el-text>
    </el-divider>
    <div class="rich-text" v-html="info?.answer"></div>
    <el-empty v-if="info.answer === '<p><br></p>'" description="暂无数据"></el-empty>
  </el-card>
</template>

<script setup>
import { Back } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import http from '@/utils/http'
import { onMounted, ref } from 'vue'
const route = useRoute()
const info = ref({})
onMounted(async () => {
  const { status, data } = await http.get(`/api/answer/${route.params.id}/`)
  if (status == 200) {
    info.value = data
  }
})
</script>

<style></style>